<template>
  <div>
    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="username" label="用户名" width="140"></el-table-column>
      <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="address" label="宿舍"></el-table-column>
      <el-table-column label="操作"  width="500" align="center">
        <template slot-scope="scope">
           <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定通过申请吗？"
              @confirm="pass(campusId,scope.row.id)"
          >
            <el-button type="primary" slot="reference">通过申请<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定拒绝申请吗？"
              @confirm="reject(campusId,scope.row.id)"
          >
            <el-button type="danger" slot="reference">拒绝申请<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  name: "User",
  data() {
    return {
      serverIp: serverIp,
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      form: {},
      multipleSelection: [],
      campusId: 0
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/master/allExits", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          masterId: this.user.id,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
      this.request.get("campus/mycampus?uid="+this.user.id).then(
        res => {
          this.campusId = res.data.id
          console.log("=================="+this.campusId)
        }
      )
    },
    reject(cid,uid){
      console.log("cid:"+cid)
      console.log("uid:"+uid)
      this.request.post("/master/rejectExit?campusId="+cid+"&memberId="+uid).then(
        res => {
            this.$message.success("拒绝成功")
            this.load()
        }
      )
    },
    pass(cid,uid){
      console.log("cid:"+cid)
      console.log("uid:"+uid)
      this.request.post("/master/passExit?campusId="+cid+"&memberId="+uid).then(
        res => {
            this.$message.success("已通过")
            this.load()
        }
      )
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    }
  }
}
</script>


<style>
.headerBg {
  background: #eee!important;
}
</style>
